<template>
    <div >

        <el-col :span="20" :offset="2">
            <el-card>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/hello' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>所有板块</el-breadcrumb-item>
                </el-breadcrumb>
            </el-card>
            <div style="height: 20px;"/>
            <el-card>
                <el-col :span="5" :offset="1" v-for="plate in allPlate">
                    <el-card shadow="hover" @click.native="goPlate(plate)">
                        {{plate.name}}
                    </el-card>
                    <div style="height: 20px;"/>
                </el-col>
            </el-card>
        </el-col>



    </div>
</template>

<script>
    export default {
        name: "AllPlate",
        created() {
            this.$axios.get("/api/plate/getAll")
            .then(req=>{
                this.allPlate = req.data.data;
            })
        },
        data(){
            return{
                allPlate:[{
                    id: 2,
                    name: "失物招领",
                    createTime: "2022-04-22"
                }]
            }
        },
        methods:{
            goPlate(plate){
                this.$router.push("/plate?id="+plate.id);
                console.log(plate);
            },
            goBack:function () {
                this.$router.push("/home");
            }
        }
    }
</script>

<style scoped>
    #root {
        width: 100%;
        height: 100%;
        background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0165625576d19800000059ff821340.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653796498&t=ee4335ec1cc486ac2f77ea4129907e92");
        background-size: 100% 100%;
    }
</style>
